<template>
 <div class="blackList_container">
    <div class="shield_box">
      <Tabs value="name1">
        <TabPane label="屏蔽短信" name="name1">
          <RadioGroup  styles="dispaly:flex;" @on-change="isshow">
            <div class="check_container">
                <Radio label="输入手机号屏蔽" value="phonenum"></Radio> 
                <Radio label="选择分组屏蔽" value="phonenum"></Radio>            
            </div>
            <div class="shield_condition">
               <div class="shield_textarea" v-if="flag">
                  <Input type="textarea" :rows="10" :col="10" placeholder="输入要屏蔽的手机号,每行一个,最多100个" :maxlength='108' :number="true"></Input>
               </div>
               <div v-else class="shield_table">
                  <Table border ref="selection" :columns="columns4" :data="data1" height="300"></Table>
               </div>
            </div>
           </RadioGroup >
           <div class="button">
               <Button type="primary">屏蔽</Button>
           </div>
        </TabPane>
        <TabPane label="屏蔽微信消息" name="name2">屏蔽微信消息</TabPane>
        <TabPane label="屏蔽数据" name="name3">屏蔽数据</TabPane>
    </Tabs>
   </div>
   <div class="Shielded_box">
       <div class="Shielded_box_title_box">
           <h3 class="Shielded_box_title">已经屏蔽的手机号</h3>
           <Input class="search" search enter-button="Search" placeholder="请输入搜索内容" />
           <Button type="primary"  icon="ios-search" class="button_search"></Button>
           <div style="clear:both;"></div>
       </div>
       <div class="phonenumber">
          <Tag v-if="shows" closable @on-close="handleClose" class="number">15937645313</Tag>
       </div>
   </div>
 </div>
</template>
<script>
export default {
  name: "BlackList",
  data() {
    return {
      flag: true,
      shows:true,
      columns4: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "人群名称",
          key: "groupname"
        },
        {
          title: "人群总数",
          key: "grouptotal"
        },
      ],
      data1: [
        {
          groupname: "面乳活跃人群",
          grouptotal: '13213232',
        },
        {
          groupname: "面乳活跃人群2",
          grouptotal: '74755',
        },
        {
          groupname: "面乳活跃人群3",
          grouptotal: '5444456',
        },
        {
          groupname: "面乳活跃人群4",
          grouptotal: '88888',
        },
        {
          groupname: "面乳活跃人群5",
          grouptotal: '9999',
        },
        {
          groupname: "面乳活跃人群6",
          grouptotal: '131321',
        },
      ]
    };
  },
  methods: {
    isshow() {
      this.flag = !this.flag;
    },
    handleClose () {
      this.shows = false;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../styles/common.scss";
.blackList_container {
  @include container_global;
  .shield_box {
    width: 30vw;
    height: 60vh;
    background-color: #fff;
    .check_container {
      display: flex;
      justify-content: space-around;
    }
    .shield_condition {
      width: 30vw;
      margin-top: 1vh;
      .shield_textarea {
        width: 25vw;
        margin: 0 auto;
      }
      .shield_table{
          width: 25vw;
          margin: 0 auto;
      }
    }
    .button {
      width: 30vw;
      height: 5vh;
      display: flex;
      margin-top: 2vh;
      justify-content: center;
    }
  }
  .Shielded_box{
     position: absolute;
     width: 53vw;
     height: 60vh;
     margin-top: -60vh; 
     margin-left: 32vw;
     background-color: #fff; 
     .Shielded_box_title_box{
         width: 53vw;
         height: 5vh;
         border-bottom: 1px solid #999;
         .Shielded_box_title{
             height: 5vh;
             line-height: 40px;
             color: #999;
             padding: 0px 0px 0px 20px;
         }
         .search{
             float: right;
             width: 200px;
             margin:-5vh 3vw 0px 0px;
         }
         .button_search{
             float: right;
             margin-top: -5vh;
         }
     }
     .phonenumber{
         display: flex;
        .number{
            width: 100px;
            margin-left: 10px;
            padding: 5px;
            margin: 10px;
            border-radius: 10px;
            background-color: lightgray;
            border-radius: 5px;
        }
     }
  }
}
</style>
